import React, {useState,useEffect,useRef}from 'react'

const App = () => {
  const [count,setCount] = useState(0)
  const [title,setTitle] = useState('我是标题')
  const inpRef = useRef()
  const timer = useRef()
  console.log(timer)
  const add = () => {
    // setCount(count + 1)
    setCount(prev => {
      console.log(prev)
      return prev + 1
    })

    console.log('添加函数内',count)
  }
  // let timer = null
  const start = () => {
    timer.current = setInterval(() => {
      setCount(prev => prev + 1)
    },1000)
  }

  const stop = () => {
    clearInterval(timer.current)
  }

  const get = () => {
    console.log(inpRef.current)
  }

  return (
    <div>
      <h1>{title}</h1>
      <input ref={inpRef} type="text" value={title} onChange={e => setTitle(e.target.value)}/>
      <button onClick={get}>获取dom元素</button>
      <p>
        <button onClick={() => setCount(count - 1)}>-</button>
        {count}
        <button onClick={add}>+</button>
      </p>
      <div>
        <p>定时器:{count}</p>
        <button onClick={start}>开启定时器</button>
        <button onClick={stop}>暂停</button>  
      </div>    
    </div>
  )
}

export default App